﻿/// <reference path="~/Scripts/jquery-1.7.1-vsdoc.js" />
(function ($) {
    var SlickEditor = {
    
        RequiredFieldValidator: function (value) {
            if (value == null || value == undefined || !value.length)
                return { valid: false, msg: "This is a required field" };
            else
                return { valid: true, msg: null };
        },

        PasswordFormatter: function () {
            return "*******";
        },
        CellButtonFormatter: function (row, cell, value, column, rowData) {
            function createButton(text, classes) {
                return "<button class='slick-cell-button slick-cell-button-" + text.replace(/\s/, "_") + " " + (classes || "") +  " ' type='button' data-row=" + row + ">" + text + "</button>";
            }

            var buttons = column.buttons;
            var html = "";
            if (buttons instanceof Array)
                for (var i = 0; i < buttons.length; i++) {
                    var button = buttons[i];

                    if (button instanceof Object) {
                        if (!('enable' in button) || (button.enableOn == 'expression' && button.enable) 
                            || ((button.negateEnable && !rowData[button.enable]) || (!button.negateEnable && rowData[button.enable])))
                            html += createButton(button.name, button.classes);
                    }
                    else
                        html += createButton(button);
                }
            else
                html = createButton(buttons);

            return html;
        },
        DateCellFormatter: function (row, cell, value, column, rowData) {
            return value == "0001-01-01" ? "N/A" : value;
        },

        DropDownListByIdCellFormatter: function (row, cell, value, columnDef, dataContext) {
            if (value == null)
                return "N/A";
            return columnDef.dataProvider[columnDef.dataIdProvider[value]][columnDef.textProperty];
        },

        EnhancedBoolCellFormatter: function (row, cell, value, columnDef, dataContext) {
            return value ? "<div class='grid-tick'></div>" : "<div class='grid-x'></div>";
        },

        CheckboxCellEditor: function (args) {
            var $select;
            var defaultValue;
            var scope = this;

            this.init = function () {
                $select = $("<INPUT type='checkbox' class='editor-checkbox' hideFocus>");
                $select.appendTo(args.container);
                $select.focus();
            };

            this.destroy = function () {
                $select.remove();
            };

            this.focus = function () {
                $select.focus();
            };

            this.loadValue = function (item) {
                defaultValue = item[args.column.field];
                if (defaultValue)
                    $select.attr("checked", "checked");
                else
                    $select.removeAttr("checked");
            };

            this.serializeValue = function () {
                return $select.attr("checked");
            };

            this.applyValue = function (item, state) {
                item[args.column.field] = !(state === undefined);
            };

            this.isValueChanged = function () {
                var a = $select.is(":checked");
                var b = ($select.is(":checked") != defaultValue);
                return ($select.is(":checked") != defaultValue);
            };

            this.validate = function () {
                return {
                    valid: true,
                    msg: null
                };
            };

            this.init();
        },

        EnhancedDateCellEditor: function (args) {
            var $input;
            var defaultValue;
            var scope = this;
            var calendarOpen = false;

            this.init = function () {
                $input = $("<INPUT type=text class='editor-text' />");
                $input.appendTo(args.container);
                $input.focus().select();
                $input.datepicker({
                    dateFormat: "yy-mm-dd",
                    showOn: "both",
                    buttonImageOnly: true,
                    buttonImage: "/Content/images/calendar.gif",
                    beforeShow: function (input) {
                        calendarOpen = true,
                            setTimeout(function () {
                                var buttonPane = $(input)
                                    .datepicker("widget")
                                    .find(".ui-datepicker-buttonpane");

                                var btn = $('<button class="ui-datepicker-current ui-state-default ui-corner-all" type="button">Clear</button>');
                                btn.unbind("click")
                                    .bind("click", function () {
                                        $.datepicker._clearDate(input);
                                    });
                                buttonPane.empty();
                                btn.appendTo(buttonPane);

                            }, 1);
                    },
                    onClose: function () { calendarOpen = false },
                    showButtonPanel: true
                });
                $input.focus().select();
                $input.width($input.width() - 18);
            };

            this.destroy = function () {
                $.datepicker.dpDiv.stop(true, true);
                $input.datepicker("hide");
                $input.datepicker("destroy");
                $input.remove();
            };

            this.show = function () {
                if (calendarOpen) {
                    $.datepicker.dpDiv.stop(true, true).show();
                }
            };

            this.hide = function () {
                if (calendarOpen) {
                    $.datepicker.dpDiv.stop(true, true).hide();
                }
            };

            this.position = function (position) {
                if (!calendarOpen) return;
                $.datepicker.dpDiv
                    .css("top", position.top + 30)
                    .css("left", position.left);
            };

            this.focus = function () {
                $input.focus();
            };

            this.loadValue = function (item) {
                defaultValue = item[args.column.field];
                if (defaultValue == "0001-01-01")
                    defaultValue = "";
                $input.val(defaultValue);
                $input[0].defaultValue = defaultValue;
                $input.select();
            };

            this.serializeValue = function () {
                return $input.val();
            };

            this.applyValue = function (item, state) {
                item[args.column.field] = state;
            };

            this.isValueChanged = function () {
                return (defaultValue == null) || ($input.val() != defaultValue);
            };

            this.validate = function () {
                if ($input.val().length == 0 || /^\d{4}-\d{1,2}-\d{1,2}$/.test($input.val()))
                    return {
                        valid: true,
                        msg: null
                    };
                else
                    return {
                        valid: false,
                        msg: "Please enter a valid date."
                    };
            };

            this.init();
        }


    };

    $.extend(window, SlickEditor);
})(jQuery);

window.SimpleDropDownListCellEditor = function (args) {
    var $select;
    var defaultValue;
    var scope = this;

    this.init = function () {
        $select = $("<SELECT tabIndex='0' class='editor-dropDownList'></SELECT>");
        for (var i = 0; i < args.column.dataProvider.length; i++)
            $select.append("<option value='" + args.column.dataProvider[i] + "'>" + args.column.dataProvider[i] + "</option>");

        $select.appendTo(args.container);
        $select.focus();
    };

    this.destroy = function () {
        $select.remove();
    };

    this.focus = function () {
        $select.focus();
    };

    this.loadValue = function (item) {
        $select.val(defaultValue = item[args.column.field]);
        $select.select();
    };

    this.serializeValue = function () {
        return $select.val();
    };

    this.applyValue = function (item, state) {
        item[args.column.field] = state;
    };

    this.isValueChanged = function () {
        return ($select.val() != defaultValue);
    };

    this.validate = function () {
        return {
            valid: true,
            msg: null
        };
    };

    this.init();
};

window.DropDownListCellEditor = function (args) {
    var $select;
    var defaultValue;
    var scope = this;

    this.init = function () {
        $select = $("<SELECT tabIndex='0' class='editor-dropDownList'></SELECT>");
        var textProperty = args.column.textProperty || "name";
        var valueProperty = args.column.valueProperty || "value";
        //$select.append(args.column.dataProvider);
        for (var i = 0; i < args.column.dataProvider.length; i++) {

            $select.append("<option value='" + args.column.dataProvider[i][valueProperty] + "'>" + args.column.dataProvider[i][textProperty] + "</option>");
        }
        //$select.append(window.gridData[args.column.dataProvider]);
        $select.appendTo(args.container);
        $select.focus();
    };

    this.destroy = function () {
        $select.remove();
    };

    this.focus = function () {
        $select.focus();
    };

    this.loadValue = function (item) {
        $select.val(defaultValue = item[args.column.field]);
        $select.select();
    };

    this.serializeValue = function () {
        return $select.val();
    };

    this.applyValue = function (item, state) {
        item[args.column.field] = state;
    };

    this.isValueChanged = function () {
        return ($select.val() != defaultValue);
    };

    this.validate = function () {
        return {
            valid: true,
            msg: null
        };
    };

    this.init();
};